body {
  --text-default: #eae8e5;
  --text-secondary: #b1b1b1;
  --text-tertiary: var(--neutral-01);
  --tertiary-button: var(--status-warning);
  --tertiary-button-overlay: var(--status-warning-hover);
  --cancel-button: var(--status-warning);
  --cancel-button-overlay: var(--status-warning-hover);
  --background-darker-80: var(--eighty-percent-black);

  --anticheat-denied: #a25d21;
  --anticheat-broken: var(--status-warning);
  --anticheat-running: var(--status-default);
  --anticheat-supported: var(--status-success);
  --anticheat-planned: var(--status-info);
  --anticheat-unknown: var(--status-denied);

  --alphabet-filter-accent-color: var(--accent);
  --alphabet-filter-accent-hover: var(--accent-overlay, var(--accent));
}

body.alphabet-filter-button--active {
  --alphabet-filter-accent-color: var(
    --accent,
    var(--primary, var(--brand-primary))
  );
  --alphabet-filter-accent-hover: var(
    --accent-overlay,
    var(--primary-hover, var(--brand-primary-hover))
  );
}

body.midnightMirage {
  /* Default Theme */

  /* Text colours */
  --text-default: var(--brand-text-01);
  --text-secondary: var(--brand-text-02);
  --text-tertiary: var(--neutral-01); /* This is not defined in figma */
  --text-quartenary: var(--neutral-04);

  /* Background colors, inputs, OnScreenKeyboard and Modal */

  --background: var(--neutral-02);
  --background-darker: var(--neutral-01);
  --background-lighter: var(--neutral-03);
  --body-background: var(--background-darker);
  --input-background: var(--background-lighter);
  --controller-hints-background: transparent;
  --current-background: var(--body-background);
  --modal-background: var(--background-darker);
  --modal-backdrop: var(--background-darker-80);
  --modal-border: var(--background);
  --osk-background: var(--body-background);
  --osk-button-background: var(--input-background);
  --osk-button-border: var(--navbar-background);
  --search-bar-background: var(--neutral-02);
  --search-bar-border: var(--neutral-03);

  /* Action Icons */
  --action-icon: var(--neutral-05);
  --action-icon-hover: var(--text-hover);
  --action-icon-active: var(--neutral-06);
  --modal-backdrop: var(--eighty-percent-black);
  --icon-disabled: var(--disabled-button);
  --icon-disabled-overlay: var(--disabled-button-overlay);
  --icons-background: var(--neutral-02);

  /* Buttons */
  --primary-button: var(--brand-primary);
  --secondary-button: var(--brand-secondary);
  --button-stroke: var(--accent);
  --secondary-button-overlay: var(--primary-hover);
  --tertiary-button-overlay: var(--status-warning-hover);
  --success-button: var(--status-success);
  --disabled-button: var(--neutral-03);
  --disabled-button-overlay: var(--neutral-05);
  --play-button: var(--primary-button);
  --install-button: var(--secondary-button);
  --cancel-button: var(--status-warning);
  --cancel-button-overlay: var(--status-warning-hover);
  --link-highlight: var(--accent);
  --success-button: var(--status-success);
  --secondary-button: var(--brand-primary);

  /* Text */
  --text-default: var(--brand-text-01);
  --text-tertiary: var(--neutral-01);
  --text-hover: var(--brand-text-02);

  /* Sidebar */
  --navbar-active: var(--text-secondary);
  --navbar-inactive: var(--neutral-06);
  --navbar-active-background: var(--background-darker);
  --navbar-accent: var(--text-default);
  --navbar-background: var(--background);
  --divider: var(--neutral-03);

  /* Status */
  --success: var(--status-success);
  --success-hover: var(--status-success-hover);
  --danger: #a62b2b;
  --danger-hover: var(--status-danger);

  /* Others for compatibility, probably can be refactored */
  --primary: var(--brand-primary);
  --secondary: var(--brand-secondary);
}

body.classic,
body.cyberSpaceOasis,
body.cyberSpaceOasisAlt {
  --background: #151f3d;
  --background-darker: #0d0f1c;
  --background-darker-80: #0d0f1ce0;
  --background-secondary: #323035;
  --background-lighter: #152f6d;

  /* Colours */
  --navbar-background: var(--background);
  --input-background: var(--background-darker);
  --body-background: #13172a;
  --current-background: var(--body-background);
  --modal-background: #13172a;
  --modal-border: #1f253f;
  --text-hover: #7ae3fa;
  --primary: #07c5ef;
  --primary-hover: #4cdafa;
  --link-highlight: #07c5ef;
  --accent: #e0ab40;
  --accent-overlay: #ffbb33;
  --navbar-accent: var(--accent);
  --navbar-active-background: var(--background-lighter);
  --play-button: #59d0ea;
  --download-button: #3082d9;
  --download-button-overlay: #1372d7;
  --danger: var(
    --status-danger
  ); /* These success, danger and disabled colours need to be documented */
  --success: #12e195;
  --success-hover: #5cefb9;
  --danger-hover: var(--status-danger-hover);
  --icon-disabled: #625e69;
  --icons-background: #17131c;
  --divider: gray;
  --osk-background: var(--body-background);
  --osk-button-background: var(--input-background);
  --osk-button-border: var(--navbar-background);
  --controller-hints-background: transparent;

  --anticheat-denied: #8a2020;
  --anticheat-broken: #a62b2b;
  --anticheat-running: #0e8598;
  --anticheat-supported: #2f9e44;
  --anticheat-planned: #6841d9;

  /* Gradients */
  --gamecard-title-color: #17131cd2;
  --gradient-gamecard: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.418) 1.8%,
    var(--gamecard-title-color) 45%
  );
  --gradient-body-background: linear-gradient(
    90deg,
    var(--background-darker) -32px,
    var(--body-background) 64px,
    var(--body-background) 100%
  );
  /* Text colours */
  --text-default: #eae8e5;
  --text-secondary: #b1b1b1;
  --text-pause-cancel: #97f4e9;
  --text-title: #ffffff;
  --text-tertiary: #101111; /* This is not defined in figma */
  --text-quartenary: #5a5e5f; /* this is meant to be a background colour */
  --text-danger: var(--status-danger);
  --text-gametitle: var(--text-default);
  --text-log: var(--status-warning);
  --text-warning: var(--status-warning-hover);

  /*Action Icons*/
  --action-icon: var(--text-default);
  --action-icon-hover: var(--brand-text-01);
  --action-icon-active: var(--brand-text-02);

  /*Buttons*/
  --success-button: #12e195;
  --secondary-button: #ffbb33;
}

body.gruvbox_dark {
  --accent: #b57614;
  --accent-overlay: #d79921;
  --navbar-accent: #f9f5d7;
  --background: #1d2021;
  --body-background: #282828;
  --background-darker: var(--body-background);
  --current-background: var(--body-background);
  --navbar-background: #32302f;
  --navbar-active-background: #282828;
  --gradient-body-background: linear-gradient(
    90deg,
    var(--background-darker) -32px,
    var(--body-background) 64px,
    var(--body-background) 100%
  );
  --input-background: #32302f;
  --modal-background: var(--body-background);
  --modal-border: var(--body-background);
  --success: #70b430;
  --success-hover: #9bce6b;
  --primary: #458588;
  --primary-hover: #83a598;
  --danger: #9e2c28;
  --danger-hover: #f05d4d;
  --anticheat-denied: #9e2c28;
  --anticheat-broken: #af3a03;
  --anticheat-running: #076678;
  --anticheat-supported: #79740e;
  --anticheat-planned: #8f3f71;
  --text-title: #f9f5d7;
  --icons-background: #3c3836;
  --action-icon: #f9f5d7;
  --action-icon-hover: #b16286;
  --action-icon-active: #8ec07c;
  --icon-disabled: #928374;
  --success-button: #9bce6b;
  --secondary-button: #e2951a;
  --osk-button-background: var(--input-background);
}

body.high-contrast {
  --accent: #00ddff;
  --accent-overlay: #36ddff;
  --navbar-accent: #ffffffff;
  --background: #121212ff;
  --body-background: #202020ff;
  --background-darker: var(--background);
  --current-background: var(--body-background);
  --navbar-background: #121212ff;
  --navbar-active-background: #202020ff;
  --gradient-body-background: var(--background);
  --input-background: #262937ff;
  --modal-background: var(--background);
  --modal-border: #ffffffff;
  --download-button: #44475a;
  --download-button-overlay: #007bff;
  --success: #00ff40;
  --success-hover: #2dff61;
  --primary: #ff0090;
  --primary-hover: #ff36a8;
  --danger: #ff0000;
  --text-title: #00ddff;
  --text-hover: #00ddff;
  --icons-background: var(--background);
  --action-icon-hover: var(--accent);
  --action-icon-active: var(--accent);
  --osk-background: var(--body-background);
  --osk-button-background: var(--input-background);
  --osk-button-border: #ffffffff;
  --secondary-button: #f364b5;

  --success-button: #00ddff;

  .heroicVersion {
    color: var(--text-default);
  }
}

body.dracula,
body.dracula-classic {
  --accent: #bd93f9;
  --accent-overlay: #d5b8ff;
  --navbar-accent: #eae8e5;
  --background: #090b1c;
  --body-background: #282a35;
  --background-darker: var(--body-background);
  --current-background: var(--body-background);
  --navbar-background: #44475a;
  --navbar-active: var(--accent);
  --navbar-active-background: #282a36;
  --gradient-body-background: linear-gradient(
    90deg,
    var(--background-darker) -32px,
    var(--body-background) 64px,
    var(--body-background) 100%
  );
  --input-background: #44475a;
  --modal-background: var(--body-background);
  --modal-border: var(--body-background);
  --success: #50fa7b;
  --success-hover: #66f389;
  --primary: #ff79c6;
  --primary-hover: #f560b4;
  --danger: #ff5555;
  --text-title: #8be9fd;
  --text-default: white;
  --icons-background: #17131c;
  --osk-background: var(--body-background);
  --osk-button-background: var(--input-background);
  --osk-button-border: var(--navbar-background);
  --action-icon: var(--text-default);
  --action-icon-hover: var(--text-hover);
  --action-icon-active: var(--accent);
  --install-button: #b889fa;
  --secondary-button: #b889fa;
  --action-icon-hover: var(--accent);
  .heroicVersion {
    color: var(--text-default);
  }
}

body.nord-light {
  --background-light: #eceff4;
  --body-background: var(--background-light);
  --accent-overlay: #81a1c1;
  --navbar-accent: #81a1c1;
  --background-darker: var(--body-background);
  --current-background: var(--body-background);
  --navbar-active-background: #2e3440;
  --gradient-body-background: linear-gradient(
    90deg,
    var(--background-light) -32px,
    var(--body-background) 64px,
    var(--body-background) 100%
  );
  --modal-background: var(--body-background);
  --modal-border: var(--body-background);
  --primary: #b48ead;
  --primary-hover: #a17399;
  --danger: #bf616a;
  --text-tertiary: var(--brand-text-01);
  --osk-background: var(--body-background);
  --osk-button-background: var(--input-background);
  --osk-button-border: var(--navbar-background);
  --action-icon-hover: var(--accent);
  --action-icon-active: var(--text-default);
  --navbar-inactive: #ffffff;
  --navbar-active: #d0ddff;
  --success-button: #3687a9;
  --secondary-button: #15a3e0;
  --icons-background: #6f738f;
  --tertiary-button: #6f738f;

  --brand-text-01: #e0f9ff;

  --neutral-06: #2e3440;
  --neutral-03: #429ec5;
  --accent: #30444a;
  --background: var(--background-light);
  --navbar-background: #4c566a;
  --input-background: #d8dee9;
  --success: #3e532d;
  --success-hover: #617550;
  --text-title: #20242c;
  --text-default: var(--text-title);
  --text-secondary: #393b41;
  --text-hover: #5e81ac;
  --action-icon: #748aa0;
  --status-warning: #b86901;
  --gamecard-title-color: #ccdaf8cc;
  --install-button: var(--primary);
  --status-success-hover: #5e81ac;
  --text-log: var(--status-warning);
  --tour-popup-background: var(--input-background);
  --tour-bullet-active: var(--accent);
  --tour-bullet-inactive: var(--accent-overlay);
  --tour-popup-title: var(--text-title);
  --tour-popup-skip-color: var(--text-secondary);
  --tour-popup-skip-color-hover: var(--text-title);

  .developer,
  .releaseDate,
  .timeContainerLabel {
    color: var(--text-default) !important;
  }

  .MuiDialog-paper {
    background-color: var(--background-light);
    color: var(--text-default);
  }

  .runnerIcon {
    background: #88c0d0;
  }

  .genre {
    background: #2e3440 !important;
    color: #e5e9f0 !important;
  }

  button.is-primary {
    color: var(--text-default);
  }

  .button.is-success {
    color: var(--text-default);
    background-color: #81a1c1;
  }

  .playIcon circle {
    fill: var(--status-success);
  }

  .downIcon circle {
    fill: var(--primary-active);
  }

  .button.is-link {
    color: var(--navbar-active);
  }

  .currentDownload {
    color: var(--navbar-active);
    --success: var(--status-success);
  }

  .selectFieldWrapper select > option {
    background: var(--background);
  }

  .searchBarInput {
    &::placeholder {
      color: var(--text-default);
      opacity: 1;
    }
  }

  .heroicVersion:hover {
    color: var(--navbar-active);
  }
  .contextMenu > .MuiPaper-root {
    &,
    & > .MuiMenu-list {
      background-color: var(--input-background);
      .MuiMenuItem-root:hover {
        background-color: var(--navbar-accent);
      }
    }
  }
  .progressDialog.log-box,
  .errorDialog.error-box {
    background-color: #dde1e7;
  }

  .gameCard > .gameCardStatus {
    color: var(--navbar-active);
  }

  .CategoriesManager__Dialog {
    .MuiDialogContent-root {
      .Category {
        &:hover,
        &:focus-within {
          background-color: rgba(0, 0, 0, 0.05);
        }
      }
    }
  }

  .tour-button {
    --tour-button-color: var(--accent);
  }

  .Sidebar .tour-button {
    --tour-button-color: var(--primary-active);
  }

  .alternative > svg {
    fill: var(--accent) !important;
  }
}

body.nord-dark {
  --accent: #a5dceb;
  --accent-overlay: #cbeef8;
  --navbar-accent: #afc4eb;
  --background: #191c22;
  --body-background: var(--background);
  --background-darker: var(--body-background);
  --current-background: var(--body-background);
  --navbar-background: #2e3440;
  --navbar-active-background: #191c22;
  --gradient-body-background: linear-gradient(
    90deg,
    var(--background-darker) -32px,
    var(--body-background) 64px,
    var(--body-background) 100%
  );
  --input-background: #2e3440;
  --modal-background: var(--body-background);
  --modal-border: var(--body-background);
  --success: #94f1ab;
  --success-hover: #75e08f;
  --primary: #b48ead;
  --primary-hover: #a17399;
  --danger: #bf616a;
  --text-title: var(--brand-text-01);
  --text-default: var(--text-title);
  --text-secondary: #ffffff;
  --osk-background: var(--body-background);
  --osk-button-background: var(--input-background);
  --osk-button-border: var(--navbar-background);
  --action-icon: #748aa0;
  --action-icon-hover: var(--accent-overlay);
  --action-icon-active: var(--text-default);
  --download-button: var(--brand-primary);
  --success-button: #94f1ab;
  --secondary-button: #a5dceb;
}

body.marine,
body.marine-classic {
  --accent: #d39f37;
  --accent-overlay: #d39f37;
  --background: #031b22;
  --body-background: #031b22;
  --background-darker: #031b22;
  --current-background: var(--body-background);
  --navbar-background: #0b3e4b;
  --navbar-active-background: #042028;
  --gradient-body-background: linear-gradient(
    90deg,
    var(--background-darker) -32px,
    var(--body-background) 64px,
    var(--body-background) 100%
  );
  --input-background: #063442;
  --modal-background: var(--body-background);
  --modal-border: var(--body-background);
  --success: #66e9fd;
  --success-hover: #5dc6f7;
  --osk-background: var(--body-background);
  --osk-button-background: var(--input-background);
  --osk-button-border: var(--navbar-background);
  --action-icon: var(--text-default);
  --action-icon-hover: var(--accent);
  --action-icon-active: var(--accent);
  --navbar-accent: var(--accent);
  --primary: #34aaf8;
  --secondary-button: #d39f37;
  --success-button: #66e9fd;
  --icons-background: #134c5c;
}

body.zombie,
body.zombie-classic {
  --accent: #59c627;
  --accent-overlay: #83da5b;
  --navbar-accent: var(--accent);
  --background: #1d1f1f;
  --body-background: var(--background);
  --background-darker: var(--body-background);
  --current-background: var(--body-background);
  --navbar-background: #323232;
  --navbar-active-background: #232525;
  --gradient-body-background: linear-gradient(
    90deg,
    var(--background-darker) -32px,
    var(--body-background) 64px,
    var(--body-background) 100%
  );
  --input-background: #323232;
  --modal-background: var(--body-background);
  --modal-border: var(--body-background);
  --success: #d8d784;
  --success-hover: #5af15a;
  --osk-background: var(--body-background);
  --osk-button-background: var(--input-background);
  --osk-button-border: #434343;
  --action-icon: var(--text-default);
  --action-icon-hover: var(--accent);
  --action-icon-active: var(--accent);
  --primary-button: #14e8c8;
  --secondary-button: #59c627;
  --success-button: #d8d784;
  --icons-background: #323232;
}

body.zombie .alphabet-filter-button--active,
body.zombie-classic .alphabet-filter-button--active {
  --alphabet-filter-accent-color: var(--primary-button);
  --alphabet-filter-accent-hover: var(
    --primary-button-hover,
    var(--primary-button)
  );
}

body.old-school {
  --accent: #ffa800;
  --accent-overlay: #ffc44f;
  --navbar-accent: #eae8e5;
  --background: #1d1f1f;
  --body-background: #1d1f1f;
  --background-darker: #1d1f1f;
  --current-background: var(--body-background);
  --navbar-background: #323232;
  --navbar-active-background: #222424;
  --gradient-body-background: linear-gradient(
    90deg,
    var(--background-darker) -32px,
    var(--body-background) 64px,
    var(--body-background) 100%
  );
  --input-background: #323232;
  --modal-background: var(--body-background);
  --modal-border: var(--body-background);
  --success: #0bd48c;
  --success-hover: #28f028;
  --osk-background: var(--body-background);
  --osk-button-background: var(--input-background);
  --osk-button-border: #434343;
  --action-icon: var(--text-default);
  --action-icon-hover: var(--accent);
  --action-icon-active: var(--accent);
  --primary-button: var(--status-success);
  --success-button: #0bd48c;
  --secondary-button: #ffa800;
  --icons-background: #323232;
}
body.classic .sid-input,
body.old-school .sid-input {
  background: var(--background);
}

body.old-school .alphabet-filter-button--active {
  --alphabet-filter-accent-color: var(--status-success);
  --alphabet-filter-accent-hover: var(--status-success-hover);
}

body.classic,
body.cyberSpaceOasisAlt,
body.dracula-classic,
body.marine-classic,
body.zombie-classic {
  --navbar-accent: var(--text-default);
}

body.sweet,
body.sweet-dark {
  --accent: #ff9af7;
  --accent-overlay: #eea6e8;
  --navbar-accent: #d4c2d6;
  --background: #110111;
  --body-background: #110111;
  --background-darker: #110111;
  --current-background: #110111;
  --navbar-background: #220422;
  --navbar-active-background: #3b0a3b;
  --gradient-body-background: linear-gradient(
    90deg,
    var(--background-darker) -32px,
    var(--body-background) 64px,
    var(--body-background) 100%
  );
  --input-background: #360a36;
  --modal-background: var(--body-background);
  --modal-border: var(--body-background);
  --success: #9a8de7;
  --success-hover: #7f148e;
  --primary: #c28cb8;
  --primary-hover: #a17399;
  --danger: #bf61a2;
  --text-log: #8c909b;
  --text-title: #e9eaeb;
  --text-default: var(--text-title);
  --text-secondary: #a892ab;
  --text-tertiary: #39263b;
  --osk-background: var(--body-background);
  --osk-button-background: var(--input-background);
  --osk-button-border: var(--navbar-background);
  --action-icon: #ab92a8;
  --action-icon-hover: var(--accent-overlay);
  --action-icon-active: var(--text-default);
  --success-button: #9a8de7;
  --secondary-button: #ff9af7;
  --icons-background: #302530;
}
